<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>ajax 异步请求</legend>
        <button onclick="doAjaxGet01()">Ajax Get Request</button>
        <span id="result">Data is Loading ...</span>
    </fieldset>

    <script type="text/javascript">
        function doAjaxGet01() {
            /* Ajax 不允许直接的跨域访问(No 'Access Control origin')*/
            /*js中错误调试
            * 1) 打桩
            * 2) 排除法
            * 3) 断点
            * */
            // 1. 创建XMLHttpRequest对象 -- Ajax应用的入口对象
            debugger;   //客户端断点, 在浏览器控制台中生效
            let xhr = new XMLHttpRequest();

            // 2. 在xhr对象上注册状态监听(拿到服务器响应结果后更新页面到result)
            xhr.onreadystatechange = function () {
                //事件处理函数(客户端与服务端通讯状态发生改变)
                if(xhr.readyState == 4 && xhr.status == 200){
                    // readyState == 4 表示服务端响应到客户端数据已经完成接收, 整个过程的状态
                    // 码为 0~5
                    /*0: 未启动(请求未初始化)
                      1: open方法执行结束执行send方法(服务器连接已建立)
                      2: 服务端处理请求,并返回给客户端(请求已收到)
                      3: 服务端传数据但还未结束(正在处理请求)
                      4:响应结束, 更新到页面上(请求已完成且响应已就绪)*/
                    // state == 200 表示请求处理过程没有出现问题
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            }
            // 回调函数, 指定访问的方法类型为 GET, 访问的url为---, 访问方式是异步(true为异步, false为同步)
            xhr.open("GET", "http://localhost/doAjaxGet01", true);
            xhr.send(null);
            console.log("===main thread===");
            // 3. 与服务器建立连接(指定请求方式, 请求url, 异步)
            // 4. 想服务端发起请求
        }
    </script>
</body>
</html>